<template>
  <div>
    <a-dropdown>
      <a class="ant-dropdown-link" @click.prevent> 链接: {{ linkOptions }} </a>
      <template #overlay>
        <a-menu>
          <a-menu-item v-for="(item, index) in linkList" :key="index">
            <a class="alink" @click="openLinkSelector(item.linkType)">{{
              item.title
            }}</a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
    <LinkSelector v-model:options="linkParams" :callBack="selectLinkItem" />
  </div>
</template>

<script lang='ts'>
import {
  defineComponent,
  reactive,
  ref,
  toRefs,
  PropType,
  computed,
} from "vue";
import LinkSelector from "./linkselector.vue";
import { LinkType, ILinkDetailProps } from "@/utils/type";
export interface ILinkParams {
  visible: boolean;
  type: LinkType.LINK_GOODS | LinkType.LINK_COUPON | LinkType.LINK_PAGE | "";
}
export default defineComponent({
  name: "DropDown",
  components: {
    LinkSelector,
  },
  props: {
    linkDetail: {
      type: Object as PropType<ILinkDetailProps>,
      default: () => ({}),
    },
    callback: {
      type: Function as PropType<(e: ILinkDetailProps) => void>,
      default: () => new Function(),
    },
  },
  setup(props) {
    const linkList = ref([
      { title: "微商品", linkType: LinkType.LINK_GOODS },
      { title: "微页面", linkType: LinkType.LINK_PAGE },
      { title: "优惠券", linkType: LinkType.LINK_COUPON },
    ]);
    /** 选择链接的组件参数 */
    const state = reactive<{ linkParams: ILinkParams }>({
      linkParams: {
        visible: false,
        type: "",
      },
    });
    /** 打开选择链接modal */
    const openLinkSelector = (linkType: LinkType) => {
      state.linkParams = {
        visible: true,
        type: linkType,
      };
    };
    /** linkselector组件的回调函数 */
    const selectLinkItem = (e: ILinkDetailProps) => {
      props.callback?.(e);
    };
    /** 链接信息 */
    const linkOptions = computed(() => {
      if (props.linkDetail && props.linkDetail.linkType) {
        const linkName = props.linkDetail.linkName,
          type = props.linkDetail.linkType;
        let typeName =
          type === LinkType.LINK_GOODS
            ? "微商品"
            : type === LinkType.LINK_PAGE
            ? "微页面"
            : "优惠券";
        return typeName + " | " + linkName;
      }
      return "请选择跳转链接";
    });
    return {
      ...toRefs(state),
      linkList,
      openLinkSelector,
      selectLinkItem,
      linkOptions,
    };
  },
});
</script>

<style lang='scss' scoped>
</style>